<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>线索管理</span>
      </div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="线索ID：">
          <el-input v-model="searchForm.id" placeholder="请输入线索ID" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="线索归属：">
          <el-input v-model="searchForm.ownerName" placeholder="请输入线索归属" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="dateRange"
            size="small"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable size="small">
            <el-option label="待跟进" value="1"></el-option>
            <el-option label="跟进中" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道来源：">
          <el-select v-model="searchForm.channel" placeholder="请选择渠道来源" clearable size="small">
            <el-option label="线上活动" value="0"></el-option>
            <el-option label="推广介绍" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom: 10px" @click="handleAdd">添加</el-button>
      <el-table :data="pageData.data" style="width: 100%" border>
        <el-table-column prop="id" label="线索ID" width="80px"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="channel" label="渠道来源">
          <template slot-scope="scope">
            <span v-if="scope.row.channel==0">线上活动</span>
            <span v-if="scope.row.channel==1">推广介绍</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="ownerName" label="归属人"></el-table-column>
        <el-table-column prop="status" label="状态" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">待跟进</span>
            <span v-if="scope.row.status==2">跟进中</span>
          </template>
        </el-table-column>
        <el-table-column prop="nextTime" label="下次跟进时间"></el-table-column>
        <el-table-column label="操作"  width="240px">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.row)">
              查看
            </el-button>
            <el-button size="mini" type="danger" @click="handleAllot(scope.row)">
              分配
            </el-button>
             <el-button size="mini" type="success" @click="handleFollow(scope.row)">
              跟进
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.totalCount">
      </el-pagination>

      <el-dialog :title="saveForm.id==null?'新增线索':'修改线索'" :visible.sync="dialogFormVisible">
        <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="90px" inline>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="saveForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="渠道来源" prop="channel">
            <el-select v-model="saveForm.channel" placeholder="请选择渠道来源" clearable size="small" @change="doActivitySelect">
              <el-option label="线上活动" value="0"></el-option>
              <el-option label="推广介绍" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动信息">
            <el-select v-model="saveForm.activityId" placeholder="请选择活动信息" clearable size="small">
              <el-option
              v-for="activity in activityOptions"
              :key="activity.id"
              :label="activity.name"
              :value="activity.id"
            />
            </el-select>
          </el-form-item>
          <el-form-item label="客户姓名">
            <el-input v-model="saveForm.name" autocomplete="off" controls-position="right"></el-input>
          </el-form-item>
          <el-form-item label="性别" style="width:295px">
            <el-radio-group v-model="saveForm.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input-number v-model="saveForm.age" autocomplete="off" controls-position="right"></el-input-number>
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="saveForm.weixin" autocomplete="off" controls-position="right"></el-input>
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="saveForm.qq" autocomplete="off" controls-position="right"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="doSave">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="分配线索" :visible.sync="dialogAssignVisible">
        <div class="tip-box">
          <!-- 您选择了 <span class="num">{{ saveForm.id.length }}</span> 个线索，请选择人员进行分配 -->
        </div>
        <el-form :model="assignForm"  label-width="90px" ref="assignForm">
          <el-form-item label="部门">
            <treeselect 
              v-model="assignForm.deptId" 
              :normalizer="normalizeOptions" 
              placeholder="请选择部门" 
              :options="deptOptions"
              style="width:480px">
            </treeselect>
          </el-form-item>
          <el-form-item label="用户">
            <el-select ref="mySelect" v-model="assignForm.userId" placeholder="请选择用户" clearable size="small">
              <el-option
                v-for="user in userOptions"
                :key="user.userId"
                :label="user.userName"
                :value="user.userId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAssignVisible = false">取 消</el-button>
          <el-button type="primary" @click="doAssignSave">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      //活动数据
      activityOptions:[],
      //部门数据
      deptOptions:[],
      //用户数据
      userOptions:[],
      //时间
      dateRange:[],
      //查询的数据模型
      searchForm: {
        //过滤条件
        id: null,
        phone: null,
        channel: null,
        ownerName: null,
        status: null,
        beginTime: null,
        endTime: null,

        //分页条件
        pageNo: 1,
        pageSize: 5,
      },
      //分页数据模型
      pageData: {
        data: [], // 分页数据
        pageNo: 1, // 当前页
        pageSize: 5, // 一页的大小
        totalCount: 0, // 总数据量
        totalPageCount: 0, // 总页数
      },
      //控制对话框显示还是隐藏
      dialogFormVisible: false,
      dialogAssignVisible:false,
      //新增的数据模型
      saveForm: {
        id:null,
        phone:null,
        channel:null,
        activityId:null,
        name:null,
        sex:"0",
        age:null,
        weixin:null,
        qq:null
      },
      assignForm:{
        assignId:null,
        userId:null,
        deptId:null,
      },
      //验证数据模型
      rules: {
        phone: [
          { required: true, message: "请输入手机号码！", trigger: "blur" },
        ],
        channel: [
          { required: true, message: "请输入渠道！", trigger: "blur" },
        ]
      },
    };
  },
  created() {
    this.doSearch();
  },
  watch: {
    'assignForm.deptId' (val) {
        this.$axios.get("/api/sys/user/treeselect", {params:{deptId:this.assignForm.deptId}})
        .then((res) => {
          if (res.data.code == 200) {
            this.userOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  methods: {
    //查询用户信息
    doSearch() {
       //获取开始时间和结束时间
      if (this.dateRange) {
        this.searchForm.beginTime = this.dateRange[0]
        this.searchForm.endTime = this.dateRange[1]
      }else{
        this.searchForm.beginTime =null;
        this.searchForm.endTime =null;
      }
      this.$axios.get("/api/tb/clue/list", {params:this.searchForm})
        .then((res) => {
          if (res.data.code == 200) {
            this.pageData.pageNo = res.data.data.current;
            this.pageData.pageSize = res.data.data.size;
            this.pageData.totalCount = res.data.data.total;
            this.pageData.totalPageCount = res.data.data.pages;
            this.pageData.data = res.data.data.records;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
   
    //查询活动下拉列表
    doActivitySelect(channel) {
      this.$axios.get("/api/tb/activity/optionselect/"+channel)
        .then((res) => {
          if (res.data.code == 200) {
            this.activityOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //改变每页显示的条数
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.doSearch();
    },
    //改变当前的页码数
    handleCurrentChange(val) {
      this.searchForm.pageNo = val;
      this.doSearch();
    },
    //清空新增表单数据
    reset () {
      this.saveForm = {
        id:null,
        phone:null,
        channel:null,
        activityId:null,
        name:null,
        sex:"0",
        age:null,
        weixin:null,
        qq:null
      };
    },
    //添加
    handleAdd() {
      //1.清空模型数据
      this.reset();
      //2.显示对话框
      this.dialogFormVisible = true;
    },
    //保存
    doSave() {
      this.$refs["saveForm"].validate((vali) => {
        if (vali) {
          //发送ajax请求
          this.$axios.post(this.saveForm.id?"/api/tb/clue/update":"/api/tb/clue/save", this.saveForm)
            .then((res) => {
              if (res.data.code == 200) {
                //1.关闭对话框
                this.dialogFormVisible = false;
                //2.友好提示
                this.$message.success(res.data.msg);
                //3.刷新表格
                this.doSearch();
              } else {
                //1.友好提示
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    //查询部门树
    doDeptTreeSelect() {
      this.$axios.get("/api/sys/dept/treeselect")
        .then((res) => {
          if (res.data.code == 200) {
            this.deptOptions = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 分配
    handleAllot (row) {
      //设置业务id
      this.assignForm.assignId=row.id;
      //查询部门信息
      this.doDeptTreeSelect();
      //显示对话框
      this.dialogAssignVisible=true;
      //重置表单元素
      this.$refs.assignForm.resetFields()
    },
    // 跟进
    handleFollow (row) {
      this.$router.push('/clue/follow?id='+row.id)
    },
    // 查看
    handleDetail (row) {
      this.$router.push('/clue/details?id='+row.id)
    },
    // 转换部门数据结构
    normalizeOptions(node) {
      if (node.children && !node.children.length) {
        // 去掉children=[]的children属性
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    //分配
    doAssignSave() {
      //发送ajax请求
      this.$axios.put("/api/tb/clue/assignClue", this.assignForm)
        .then((res) => {
          if (res.data.code == 200) {
            //1.关闭对话框
            this.dialogAssignVisible = false;
            //2.友好提示
            this.$message.success(res.data.msg);
            //3.刷新表格
            this.doSearch();
          } else {
            //1.友好提示
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
}
</script>

<style scoped>
</style>

